<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../../resources/js-test.js"></script>
</head>
<body>
<select size=4>
    <option tabindex="0" id="optionA">A</option>
    <option tabindex="0" id="optionB" style="display: none">B</option>
    <option tabindex="0" id="optionC" style="visibility: hidden">C</option>
    <optgroup tabindex="0" id="optgroupD" label="D" style="display: none">
        <option tabindex="0" id="optionE">E</option>
    </optgroup>
    <optgroup tabindex="0" id="optgroupF" label="F" style="visibility: hidden">
        <option tabindex="0" id="optionG">G</option>
        <option tabindex="0" id="optionH" style="visibility: visible">H</option>
    </optgroup>
</select>
<script>
description('option/optgroup in menulist can be made focusable by setting tabindex as long as they aren\'t hidden');

function isFocusable(id) {
    var element = document.getElementById(id);
    element.focus();
    return document.activeElement === element;
}

shouldBeTrue('isFocusable("optionA")');
shouldBeFalse('isFocusable("optionB")');
shouldBeFalse('isFocusable("optionC")');
shouldBeFalse('isFocusable("optgroupD")');
shouldBeFalse('isFocusable("optionE")');
shouldBeFalse('isFocusable("optgroupF")');
shouldBeFalse('isFocusable("optionG")');
shouldBeTrue('isFocusable("optionH")');
</script>
</body>
</html>
